<!DOCTYPE html>
<html>
<head>
	<title>用户管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.js"></script>
	<script src="js/layui/layui.all.js"></script>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/mui.css" rel="stylesheet"/>
	<link href="css/common.css" rel="stylesheet"/>
	<link href="css/yhgl.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
		<style>
			 .yhgl-btn{
			 	display: inline-block;
			 	width:33%;
			 	padding: 10px;
			 }
			 .yhgl-items-gly{
				 color: #01DBB5;
				 font-size:16px;
				 text-align: center;
			 }
			 .gly{
				  display: inline-block;
			 }
			 ul li{
				   display: inline-block;
					 width: 30%;
					 color: #01DBB5;
					 height:10px;
			 }
			 li a{
				 display: inline-block;
				 color: #222222;
				 font-size: 14px;
			 }
			 nav{
				position:fixed;
				z-index:120;
				text-align:center;
			 }
			 #nav{
			 	z-index: 999;
			 }
		</style>
</head>
<body >
	<header class="mui-bar mui-bar-nav mui-bar-transparent bg main-header" >
	<div class="back"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left back" >返回</a></div>
	<div class="back" style="text-align: center;"><a class="mui-icon  mui-pull-center back" >管理用户</a></div>
</header>
<div class="bg main-nav" > </div>
	<div class="mui-content" style="margin-top: 20px;" >
		    <div class="list" >
					
			</div>
			</div>
			<nav class="mui-bar mui-bar-tab" id="nav" >
				<div class="yhgl-btn"><button class="mui-tab-label btn_add" onclick="add()" >新增</button></div>
				<div class="yhgl-btn"><button class="mui-tab-label btn_edit" onclick="edit()" >编辑</button></div>
        		<div class="yhgl-btn"><button class="mui-tab-label btn_del" onclick="del()" >删除</button></div>
			</nav>
</div>
</body>
<script src="js/jquery.min.js.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*
	 * 管理用户的界面的逻辑：
	 * 获取用户缓存,展示在列表里
	 */
	$('.list').empty();
	var admin = Db.query('admin','');
	$('.list').append(htmlFn(admin));
	
	
	var users = Db.query('user','');
	$.each(users, function(i,d) {
		$('.list').append(htmlFn(d));
	});
	function add(){
		mui.openWindow({
				url:'yhtj.html', 
		})
	}
	
	function edit(){
		if($("input[name='radio1']:checked").length==0){
			mui.toast('您还没有选中');
			return;
		}
		if($("input[name='radio1']:checked").length>1){
			mui.toast('只可以同时编辑一个');
			return;
		}
		var data_id = $("input[name='radio1']:checked").parents('.list-item').attr('data-id');
		mui.openWindow({
			url:'yhxg.html?'+data_id
		})
	}
	
	
	function del(){
		$("input[name='radio1']:checked").each(function(index,ele){
			var id = $(ele).parents('.list-item').attr('data-id');
			if(id=='admin'){
				mui.toast('管理员不可删除');
				return false;
			}
			Db.delete('user',id);
			$(ele).parents('.list-item').remove();
		})
	}
	function htmlFn(data){
		var html = '';
		var user_type = '';
		var _switch =  data.USERS2 == 0 ? "关" : "开";
		
		switch(data.USERS1){
			case 'G' :
				user_type = '管理员';
				break;
			case 'Z' :
				user_type = '质检员';
				break;
			case 'B' :
				user_type = '班长';
				break;
			case 'F' :
				user_type = '复检员';
				break;	
		}
		html+='<div class="list-item" data-id="'+data.ID+'">';
		html+='	<div class="list-items yhgl-items-gly"   id="xz">';
		html+='		<div class="gly">'+user_type+'</div>';
		html+='		<div class="mui-input-row mui-checkbox"  style="margin-top:-50px;">';
		html+='			<label></label>';
		html+='			<input name="radio1"   type="checkbox">';
		html+='		</div>';
		html+='  	</div>';
		html+='	<div class="list-items">';
		html+='	   <div style="display:flex; justify-content:space-around; ">';
		html+='		   	<a>用户名：'+data.ID+'</a>';
		html+='		   	<div class="mima">';
		html+='		   		密码:<a>'+data.PWD+'</a>';
		html+='		   	</div>';
		html+='	   </div>';
		html+='  	</div>';
		html+='	<div class="list-items2">';
		html+='		<ul >';
		html+='			<li >';
		html+='				姓名<br/><br/><a>'+ data.UNAME  +'</a>';
		html+='			</li>';
		html+='			<li>';
		html+='				角色<br/><br/><a>'+data.USERS1+'</a>';
		html+='			</li>';
		if(data.ID!='admin'){
			html+='			<li >';
			html+='				地磅开关<br><br/><a>'+_switch+'</a>';
			html+='			</li>';
		}
		html+='		</ul>';
		html+='	</div>';
		html+='</div>';
		return html;
	}
	
</script>
</html>